<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="助记名称" prop="name">
                            <el-input v-model="condition.search.name"
                                      placeholder="助记名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="配置ID" prop="configId">
                            <el-input v-model="condition.search.configId"
                                      placeholder="配置ID"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            size="small"
            :data="tableData"
            @selection-change="handleSelectionChange"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="55" v-if="mode === 'select'"></el-table-column>
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="助记名称">
            </el-table-column>
            <el-table-column
                prop="configId"
                label="配置ID">
            </el-table-column>
            <el-table-column
                prop="qrCode"
                label="二维码">
                <template v-slot="scope">
                    <el-image style="width: 80px; height: 80px"
                              v-if="scope.row.scene == 2"
                              :src="scope.row.qrCode"
                              :preview-src-list="qrcodeImgUrls"
                              fit="contain">
                    </el-image>
                    <span v-else>
                        {{ scope.row.qrCode }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="type"
                :formatter="formatType"
                label="类型">
            </el-table-column>
            <el-table-column
                prop="scene"
                :formatter="formatScene"
                label="场景">
            </el-table-column>
            <el-table-column
                prop="skipVerify"
                :formatter="formatSkipVerify"
                label="是否验证">
            </el-table-column>
            <el-table-column
                prop="state"
                label="自定义参数">
            </el-table-column>
            <el-table-column
                prop="employeeNames"
                label="关联用户">
            </el-table-column>
            <el-table-column
                prop="departmentNames"
                label="关联部门">
            </el-table-column>
            <el-table-column
                prop="welcomeTitle"
                label="欢迎语">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="80px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">编辑</el-button>
                        <el-dropdown>
                            <el-button type="text" size="small">
                                更多
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button @click="configWelcomeMsg(scope.row)" type="text" size="small">
                                        配置欢迎语
                                    </el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="助记名称">
                    <el-input v-model="addOrUpdateForm.name"
                              placeholder="助记名称"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="addOrUpdateForm.type" :disabled="disabled"
                               placeholder="类型">
                        <el-option label="单人" :value="1"></el-option>
                        <el-option label="多人" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="场景">
                    <el-select v-model="addOrUpdateForm.scene" :disabled="disabled"
                               placeholder="场景">
                        <el-option label="二维码" :value="2"></el-option>
                        <el-option label="小程序" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小程序样式" v-if="addOrUpdateForm.scene == 1">
                    <el-select v-model="addOrUpdateForm.style"
                               placeholder="小程序样式">
                        <el-option label="样式1" :value="1"></el-option>
                        <el-option label="样式2" :value="2"></el-option>
                        <el-option label="样式3" :value="3"></el-option>
                    </el-select>
                    <div class="form-tips">
                        <a href="https://developer.work.weixin.qq.com/document/path/92228#%E9%99%84%E5%BD%95" target="_blank">请参考这里</a>
                    </div>
                </el-form-item>
                <el-form-item label="自定义参数">
                    <el-input v-model="addOrUpdateForm.state"
                              placeholder="自定义参数"></el-input>
                </el-form-item>
                <el-form-item label="用户列表">
                    <el-button @click="selectEmployeeDialogVisible = true" size="mini" type="plain"
                               v-if="selectedEmployees.length === 0">
                        点击选择
                    </el-button>
                    <el-button @click="selectEmployeeDialogVisible = true" size="mini" type="success" v-else>
                        已选择{{ selectedEmployees.length }}名员工
                    </el-button>
                </el-form-item>
                <el-form-item label="部门列表">
                    <el-button @click="selectDepartmentDialogVisible = true" size="mini" type="plain"
                               v-if="selectedDepartments.length === 0">
                        点击选择
                    </el-button>
                    <el-button @click="selectDepartmentDialogVisible = true" size="mini" type="success" v-else>
                        已选择{{ selectedDepartments.length }}个部门
                    </el-button>
                </el-form-item>
                <el-form-item label="是否需要验证">
                    <el-switch v-model="!addOrUpdateForm.skipVerify"></el-switch>
                    <div class="form-tips">外部客户添加时是否需要验证</div>
                </el-form-item>
                <el-form-item label="是否排他性">
                    <el-switch v-model="addOrUpdateForm.isExclusive"></el-switch>
                    <div class="form-tips">
                        是否开启同一外部企业客户只能添加同一个员工，开启后，同一个企业的客户会优先添加到同一个跟进人
                    </div>
                </el-form-item>
                <el-form-item label="是否临时会话">
                    <el-switch v-model="addOrUpdateForm.isTemp"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择员工" width="50%" :visible.sync="selectEmployeeDialogVisible" append-to-body>
            <work-employee ref="employee" size="small" mode="select" :work-corp-id="workCorpId"
                           :selected="selectedEmployees"></work-employee>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectEmployeeDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="selectEmployeeConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择部门" width="50%" :visible.sync="selectDepartmentDialogVisible" append-to-body>
            <work-department ref="department" size="small" mode="select" :work-corp-id="workCorpId"
                             :selected="selectedDepartments"></work-department>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectDepartmentDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="selectDepartmentConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="配置欢迎语" width="50%" :visible.sync="welcomeMsgDialogVisible">
            <work-welcome-msg ref="welcomeMsg" size="small" mode="select" :work-corp-id="workCorpId"
                              :selected="selectedWelcomeMsgs"></work-welcome-msg>
            <div slot="footer" class="dialog-footer">
                <el-button @click="welcomeMsgDialogVisible = false" :size="size">关 闭</el-button>
                <el-button @click="configWelcomeMsgConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addWorkQrcodeEmployee,
    configWelcomeMsgWorkQrcodeEmployee,
    deleteWorkQrcodeEmployee,
    getWorkQrcodeEmployeeByPage,
    getWorkWelcomeMsgById,
    updateWorkQrcodeEmployee
} from '@/api/api'
import WorkEmployee from "@/component/workwx/WorkEmployee";
import WorkDepartment from "@/component/workwx/WorkDepartment";
import WorkWelcomeMsg from "@/component/workwx/WorkWelcomeMsg";

export default {
    name: "WorkQrcodeEmployee",
    components: {WorkEmployee, WorkDepartment, WorkWelcomeMsg},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},
            // 禁用
            disabled: false,

            qrcodeSelected: [],

            // 员工选择
            selectEmployeeDialogVisible: false,
            selectedEmployees: [],

            // 部门选择
            selectDepartmentDialogVisible: false,
            selectedDepartments: [],

            // 欢迎语配置
            welcomeMsgDialogVisible: false,
            selectedWelcomeMsgs: [],
            welcomeMsgForm: {},

            // 二维码图片数组
            qrcodeImgUrls: [],
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        size: {
            type: String,
            default: 'small'
        },
        mode: {
            type: String,
            default: 'list'
        },
        // 选中的行
        selected: {
            type: Array,
            default: () => []
        },
        workCorpId: String
    },
    methods: {
        handleSelectionChange(val) {
            this.qrcodeSelected = val;
        },
        selectEmployeeConfirm() {
            this.selectedEmployees = this.$refs.employee.employeeSelected;
            this.selectEmployeeDialogVisible = false;
            this.addOrUpdateForm.employees = this.selectedEmployees;
        },
        selectDepartmentConfirm() {
            this.selectedDepartments = this.$refs.department.departmentSelected;
            this.selectDepartmentDialogVisible = false;
            this.addOrUpdateForm.departments = this.selectedDepartments;
        },
        configWelcomeMsg(row) {
            this.selectedWelcomeMsgs = [];
            if (row.welcomeId) {
                getWorkWelcomeMsgById({id: row.welcomeId}).then(data => {
                    if (data.body) {
                        this.selectedWelcomeMsgs.push(data.body);
                    }
                })
            }
            this.welcomeMsgDialogVisible = true;
            this.welcomeMsgForm.id = row.id;
        },
        configWelcomeMsgConfirm() {
            this.selectedWelcomeMsgs = this.$refs.welcomeMsg.welcomeMsgSelected;
            if (this.selectedWelcomeMsgs.length > 0) {
                if (this.selectedWelcomeMsgs.length > 1) {
                    this.$message({
                        type: 'error',
                        message: '只能配置一条欢迎语'
                    });
                    return;
                }
                this.welcomeMsgForm.welcomeId = this.selectedWelcomeMsgs[0].id;
            } else {
                this.$message({
                    type: 'error',
                    message: '请选择一条欢迎语'
                });
                return;
            }
            configWelcomeMsgWorkQrcodeEmployee(this.welcomeMsgForm).then(data => {
                if (data.respCode == 1000) {
                    this.welcomeMsgDialogVisible = false;
                    this.getData();
                }
            })
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatSkipVerify: function (row, column, cellValue) {
            if (cellValue) {
                return "无需";
            } else {
                return "需要";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "单人";
            } else if (cellValue == '2') {
                return "多人";
            } else {
                return "未知";
            }
        },
        formatScene: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "小程序联系";
            } else if (cellValue == '2') {
                return "二维码联系";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            this.addOrUpdateForm.workCorpId = this.workCorpId;
            this.disabled = false;
            this.$set(this.addOrUpdateForm, "skipVerify", true)
            this.$set(this.addOrUpdateForm, "isExclusive", true)
            this.$set(this.addOrUpdateForm, "isTemp", false)
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
            this.disabled = true;
            if (row.departments) {
                this.selectedDepartments = row.departments;
            } else {
                this.selectedDepartments = [];
            }
            if (row.employees) {
                this.selectedEmployees = row.employees;
            } else {
                this.selectedEmployees = [];
            }
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addWorkQrcodeEmployee(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        update: function () {
            updateWorkQrcodeEmployee(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWorkQrcodeEmployee({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            if (this.workCorpId) {
                this.condition.search.workCorpId = this.workCorpId;
            }
            getWorkQrcodeEmployeeByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;

                this.tableData.forEach((item, index, arr) => {
                    if (item.scene == 2) {
                        this.qrcodeImgUrls.push(item.qrCode);
                    }
                })
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
